var datazhu = {};
var databiaoge ={};
$.ajax({
    url: url+'system/deviceActivity?days=7', 
    type: 'get',
    dataType: 'json',
    contentType: "application/json;charset=utf-8",
    async : false,//需要改成同步的
    success:function(res){
        datazhu = JSON.stringify(res, null, 4);
        datazhu = JSON.parse(datazhu);
    }
})
datazhu = datazhu.content;
var myDate = new Date();
var thisy = myDate.getYear();
var thism = myDate.getMonth();
var jintian = myDate.getDate();
// console.log(jintian);
var zhuZT = echarts.init(document.getElementById('zhuzt'));
var dataAxis = [];

if (jintian>=7) {
    dataAxis = [(jintian-6).toString()+'日', (jintian-5).toString()+'日', (jintian-4).toString()+'日', (jintian-3).toString()+'日', (jintian-2).toString()+'日', (jintian-1).toString()+'日', (jintian).toString()+'日'];
}else if(thism == 1||thism == 3||thism == 5||thism == 7||thism == 8||thism == 10||thism == 12){
    if(jintian == 6){
        dataAxis = ['31日', '1日', '2日', '3日', '4日', '5日', '6日'];
    }else if(jintian == 5){
        dataAxis = ['30日', '31日', '1日', '2日', '3日', '4日', '5日'];
    }else if(jintian == 4){
        dataAxis = ['29日', '30日', '31日', '1日', '2日', '3日', '4日'];
    }else if(jintian == 3){
        dataAxis = ['28日', '29日', '30日', '31日', '1日', '2日', '3日'];
    }else if(jintian == 2){
        dataAxis = ['27日', '28日', '29日', '30日', '31日', '1日', '2日'];
    }else if(jintian == 1){
        dataAxis = ['26日', '27日', '28日', '29日', '30日', '31日', '1日'];
    }
}else if(thism == 4||thism == 6||thism == 9||thism == 11){
    if(jintian == 6){
        dataAxis = ['30日', '1日', '2日', '3日', '4日', '5日', '6日'];
    }else if(jintian == 5){
        dataAxis = ['29日', '30日', '1日', '2日', '3日', '4日', '5日'];
    }else if(jintian == 4){
        dataAxis = ['28日', '29日', '30日', '1日', '2日', '3日', '4日'];
    }else if(jintian == 3){
        dataAxis = ['27日', '28日', '29日', '30日', '1日', '2日', '3日'];
    }else if(jintian == 2){
        dataAxis = ['26日', '27日', '28日', '29日', '30日', '1日', '2日'];
    }else if(jintian == 1){
        dataAxis = ['25日', '26日', '27日', '28日', '29日', '30日', '1日'];
    }
}else if(thism==2){
    if(thisy%4!=0){
        if(jintian == 6){
            dataAxis = ['28日', '1日', '2日', '3日', '4日', '5日', '6日'];
        }else if(jintian == 5){
            dataAxis = ['27日', '28日', '1日', '2日', '3日', '4日', '5日'];
        }else if(jintian == 4){
            dataAxis = ['26日', '27日', '28日', '1日', '2日', '3日', '4日'];
        }else if(jintian == 3){
            dataAxis = ['25日', '26日', '27日', '28日', '1日', '2日', '3日'];
        }else if(jintian == 2){
            dataAxis = ['24日', '25日', '26日', '27日', '28日', '1日', '2日'];
        }else if(jintian == 1){
            dataAxis = ['23日', '24日', '25日', '26日', '27日', '28日', '1日'];
        }
    }else{
        if(jintian == 6){
            dataAxis = ['29日', '1日', '2日', '3日', '4日', '5日', '6日'];
        }else if(jintian == 5){
            dataAxis = ['28日', '29日', '1日', '2日', '3日', '4日', '5日'];
        }else if(jintian == 4){
            dataAxis = ['27日', '28日', '29日', '1日', '2日', '3日', '4日'];
        }else if(jintian == 3){
            dataAxis = ['26日', '27日', '28日', '29日', '1日', '2日', '3日'];
        }else if(jintian == 2){
            dataAxis = ['25日', '26日', '27日', '28日', '29日', '1日', '2日'];
        }else if(jintian == 1){
            dataAxis = ['24日', '25日', '26日', '27日', '28日', '29日', '1日'];
        }
    }   
}

var yMax = 40;
var zhuoption = {
textStyle: {
    color: '#fff'//柱状图每条数据的字体颜色
},
xAxis: {
    data: dataAxis,
    axisLabel: {
        inside: true,
        textStyle: {
            color: '#fff'//柱状图横坐标字体颜色
        }
    },
    axisTick: {
        show: false
    },
    axisLine: {
        show: false
    },
    z: 10
},
yAxis: {
    axisLine: {
        show: false
    },
    axisTick: {
        show: false
    },
    axisLabel: {
        textStyle: {
            color: '#fff'//柱状图纵坐标颜色
        }
    }
},
dataZoom: [{
    type: 'inside'
}],
  series: [
   {
    type: 'bar',
    itemStyle: {
        normal: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                    offset: 0,
                    color: '#83bff6'
                }, {
                    offset: 0.5,
                    color: '#188df0'
                }, {
                    offset: 1,
                    color: '#188df0'
                }]
                )
        },
        emphasis: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, [{
                    offset: 0,
                    color: '#2378f7'
                }, {
                    offset: 0.7,
                    color: '#2378f7'
                }, {
                    offset: 1,
                    color: '#83bff6'
                }]
            )
        }
    },
    data: datazhu,
  }],
  label: {
    normal: {
        show: true,
        position: 'top',
        formatter: '{c}'//formatter: '{c}次'可以在数据后面显示单位
    }
  },
};
// Enable data zoom when user click bar.
var zoomSize = 6;//6就是点击一条左右最多各显示三条，比如如果点击最左边的就只显示右边三条
zhuZT.on('click', function(params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    zhuZT.dispatchAction({
        type: 'dataZoom',
        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, datazhu.length - 1)]
    });
});
zhuZT.setOption(zhuoption);
var databing = {};
$.ajax({
    url: url+'system/deviceType?type=all',
    type: 'get',
    dataType: 'json',
    async : false,//需要改成同步的
    contentType: "application/json;charset=utf-8",
    success:function(res){
        databing = JSON.stringify(res, null, 4);
        databing = JSON.parse(databing);
        // console.log(databing);
    }
})
var databing1 = [];
var aaabb = [];
for (var i = 0; i <databing.content.length; i++) {
    databing.content[i].value = Number(databing.content[i].value.substring(0,databing.content[i].value.length-1));
}
for (var i = 0; i <databing.content.length; i++) {
    databing1.push({
        value:databing.content[i].value,
        name: databing.content[i].name
    });
    aaabb.push(databing.content[i].name);
}
var con = {};
var kx = new Set([]);
// var shan = new Set([]);
$.ajax({
    url: url+'system/deviceRealtimeOperation',
    type: 'get',
    dataType: 'json',
    contentType: "application/json;charset=utf-8",
    async : false,//需要改成同步的
}).done(function(data, status, jqXHR){
    var content = data.content;   
    
    content.map(x=>kx.add(x));
    // for (let i of sskx) {
    //   shan.add(i);
    // };
    // for (let i of kx) {
    //   shan.delete(i);
    // };
    // console.log([...shan]);
    // console.log(data);
    // var status = 1;
    var len = content.length;
    var htmlStr = "<table class='table' style='table-layout:fixed;'><thead><tr><th>站点</th><th style='width:4vw;'>站长</th><th style='width:9vw;'>开启时间</th><th style='width:3vw;'>状态</th></tr></thead><tbody>";
    for(var i = 0; i < len; i++){
        con = content[i];
        htmlStr += "<tr><td>"+con.stationName+"</td><td>"+con.masterName+"</td><td>"+con.createDate+"</td><td>"+con.status+"</td></tr>";

    }
    htmlStr += "</tbody></table>";
    $("#example").html(htmlStr);    
});

var bingZT = echarts.init(document.getElementById('bingzt'));
// var dataStyle = {
//     normal: {
//         label: {
//             show: false
//         },
//         labelLine: {
//             show: false
//         },
//         shadowBlur: 40,
//         shadowColor: 'rgba(40, 40, 40,0.5)',
//     }
// };
var bingoption = {
    backgroundColor: 'rgba(255,255,255,0)',
    tooltip: {
        show: false,
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        left: '-5%',
        data: aaabb,
        textStyle: {
            color: '#fff',
            fontWeight: 'bold',
            fontSize: 15
        }
    },
    series: [{
        type: 'pie',
        selectedMode: 'single',
        radius: ['20%', '68%'],
        color: ['#59ADF3', '#0A71A6', '#FF999A'],

        label: {
            normal: {
                position: 'inner',
                formatter: '{d}%',
                show:true,
                textStyle: {
                    color: '#fff',
                    fontWeight: 'bold',
                    fontSize: 20
                }
            },
            emphasis: {
                show: true,
                formatter: function(param) {
                    return param.percent.toFixed(0) + '%';
                },
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        labelLine: {
            normal: {
                show: false
            }
        },
        data: databing1
    }]
};

window.addEventListener("resize",function(){
    zhuZT.resize();
    bingZT.resize();
});

var ditu = echarts.init(document.getElementById('mainMap'));
var ningbo = {name:'宁波'};
var pointSize = 15;
var data1 = [];
// var abcabc = [];
var geoCoordMap1 = {};
// for (var i = 0;i < abcabc.length; i++){
//     data1.push(
//         {
//             'name':abcabc[i].stationName,
//             'value':
//             [
//                 abcabc[i].stationName,
//                 abcabc[i].masterName,
//                 abcabc[i].createDate,
//                 abcabc[i].status,
//                 [abcabc[i].longitude,abcabc[i].latitude]
//             ]
//         }
//     );
// }
// for(var i = 0;i < data1.length; i++){
//     geoCoordMap1[data1[i].name] = data1[i].value[4];
// }

var convertData1 = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord1 = geoCoordMap1[data[i].name];
        if (geoCoord1) {
            res.push({
                name: data[i].name,
                value: geoCoord1.concat(data[i].value)
            });
        }
    }
    return res;
};
var fgcolor = '#FFF9B1';//特定区域的颜色
var BJData = [];
var geoCoordMap = {};
$.ajax({
    url: url+'system/globalNetData',
    type: 'get',
    dataType: 'json',
    async : false,//需要改成同步的
    success:function(res){
      datacity = JSON.stringify(res, null, 4);
      datacity = JSON.parse(datacity);
      for(var i=0;i<datacity.content.length;i++){
        geoCoordMap[datacity.content[i].name] = datacity.content[i].location;
      }
    }  
});
for (var i = 0; i < datacity.content.length; i++) {
    BJData.push([ningbo,datacity.content[i]]);
}

var option = {
    backgroundColor: 'rgba(0,0,0,0)',//大背景透明
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        top: 'bottom',
        left: 'right',
        data: ['智能宝 Top10', '智联宝 Top10', '门禁 Top10'],
        textStyle: {
            color: '#fff'
        },
        selectedMode: 'single'
    },
    // toolbox: {
    //     show: true,
    //     // orient: 'vertical',
    //     left: 'right',
    //     top: 'bottom',
    //     feature: {
    //         saveAsImage: {}
    //     }
    // },
    geo: {
        regions: [{
            name: '浙江',
            itemStyle: {
                normal: {
                    areaColor: fgcolor//特定区域的颜色
                }
            }
        },
        {
            name: '江西',
            itemStyle: {
                normal: {
                    areaColor: fgcolor
                }
            }
        },
        {
            name: '重庆',
            itemStyle: {
                normal: {
                    areaColor: fgcolor
                }
            }
        },
        {
            name: '四川',
            itemStyle: {
                normal: {
                    areaColor: fgcolor
                }
            }
        },
        {
            name: '上海',
            itemStyle: {
                normal: {
                    areaColor: fgcolor
                }
            }
        },
        {
            name: '河南',
            itemStyle: {
                normal: {
                    areaColor: fgcolor
                }
            }
        },
        {
            name: '福建',
            itemStyle: {
                normal: {
                    areaColor: fgcolor
                }
            }
        }],
        zoom:1.2,//默认1，初始地图缩放比例
        // zlevel: 2,
        map: 'china',
        label: {
            emphasis: {
                show: true, //鼠标移上去以后是否显示省份名字
                color: 'white',  
                fontSize: 20                    
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: '#2580C3',//地图底色
                borderColor: '#094579'//省份边界色
            },
            emphasis: {
                areaColor: '#094579'//鼠标移上去以后的省份颜色
            }
        }
    },
    series: [
        {
            // name: item[0] + '',
            type: 'effectScatter',
            coordinateSystem: 'geo',//地理坐标系
            zlevel: 2,//显示的图层上下优先级，数字越大显示在越上层,默认0
            rippleEffect: {
                //period:4,//动画时间，默认4
                //scale:2.5,//最大缩放比例，默认2.5
                brushType: 'stroke',//涟漪效果，还有一种是fill
            },
            label: {
                normal: {
                    show: false,//目的地城市名称是否显示
                    position: 'right',//地名显示在坐标点右边
                    formatter: '{b}'
                }
            },
            tooltip: {
                trigger: 'item',
                show: true,  
                borderWidth: 2, 
                borderColor: '#19A3C6',
                textStyle:{  
                    fontSize: 18,  //提示框文字大小
                },
                formatter: function (params) {
                    var res='<p>智联保</p>';
                    res+='<div>'+ params.name +'：'+params.value[2]+' 台'+'</div>'
                    return res;
                }
            },//感觉是echarts 的问题，不写这个tooltip就一定会显示坐标什么的
            symbolSize: function(val) {
                return val[2] / 10+3;//产品数量的多少，决定城市点的大小
            },
            itemStyle: {
                normal: {
                    color: '#E62129',//城市点的颜色
                }
            },
            data: BJData.map(function(dataItem) {
                // var temp = geoCoordMap[dataItem[1].name].concat([dataItem[1].value]).concat('台');
                return {
                    name: dataItem[1].name,
                    value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                };
            })
            
        }
        // {
        //     type: 'map',
        //     map: 'china',
        //     zoom:1.2,
        //     zlevel:4,
        //     label: {
        //         emphasis: {
        //             show: true, //鼠标移上去以后是否显示省份名字
        //             color: 'white',  
        //             fontSize: 20                    
        //         }
        //     },
        //     tooltip:{
        //         show:false
        //     },
        //     roam: true,
        //     itemStyle: {
        //         normal: {
        //             areaColor: 'rgba(0,0,0,0)',//地图底色
        //             borderColor: 'rgba(0,0,0,0)'//省份边界色
        //         },
        //         emphasis: {
        //             areaColor: '#094579'//鼠标移上去以后的省份颜色
        //         }
        //     }
        // }
        
    ]
};
bingZT.setOption(bingoption);
ditu.setOption(option);




// 地图下钻
// ditu.on('click', function (params){
//     console.log(params);
//     var aaa = [];
//     if(params.name=='河南'){
//         aaa = [114.05,33.58];
//     }else if(params.name == '浙江'){
//         aaa = [119.65,29.10];
//     }else if(params.name=='江西'){
//         aaa = [116.36,27.95];
//     }else if(params.name=='新疆'){
//         aaa = [80.27,41.17];
//     }else if(params.name=='四川'){
//         aaa = [104.07,30.68];
//     }else if(params.name=='重庆'){
//         aaa = [106.53,29.54];
//     }else if(params.name=='福建'){
//         aaa = [117.64,26.27];
//     }else if(params.name=='上海'){
//         aaa = [121.49,31.25];
//     }
//     ditu = echarts.init(document.getElementById('mainMap'));
//     option = {
//         geo: {
//             map: params.name,
//             center:aaa,
//             regions: [{
//                 name: '金华市',
//                 itemStyle: {
//                     normal: {
//                         areaColor: fgcolor//特定区域的颜色
//                     }
//                 }
//             }],
//         }
//     };
//     ditu.setOption(option);
//     window.addEventListener("resize",function(){
//           ditu.resize();
//     });
// });
window.addEventListener("resize",function(){
      ditu.resize();
});
